<template>
	<view class="header">
		<!-- 骑手信息 -->
		<view class="rider-section">
			<view class="rider-info">
				<u-avatar size="60" src="/static/images/car.png"></u-avatar>
				<view class="rider-detail">
					<text class="rider-name">驾驶员张三</text>
					<text class="delivery-time">配送用时 28分钟</text>
				</view>
			</view>
			<view class="rating">
				<text class="rating-text">满意度评分</text>
				<u-rate :count="5" :allowHalf="true" v-model="score" active-color="#ffd21e" size="26" :readonly="true"></u-rate>
			</view>
		</view>
		<view class="addSite" @tap="commentShow=true" v-if="isEva">
			<u-button shape="circle" type="primary" text="评论驾驶员"></u-button>
		</view>
	</view>

	<scroll-view scroll-y style="height: 70vh;" @scrolltolower="loadMore">
		<view class="listNull" v-if="commentList.length == 0">
			<img src="@/static/images/listNull.png" alt="" />
			<text>暂无评论</text>
		</view>
		<view class="item" v-for="(item,index) of commentList" :key="index">
			<view class="flex-between">
				<text v-show="item.isMine" class="myComment">我评价的</text>
				<u-rate count="5" v-model="item.score" :allowHalf="true" readonly></u-rate>
			</view>
			<view class="flex-between">
				<view class="flex">
					<view class="mr10"> <u-avatar size="40"></u-avatar></view>
					<view class="self-center">{{item.id?maskPhoneNumber(item.puserInfo.phone):'用户'}}</view>
					<!-- <view class="self-center">{{maskPhoneNumber('17304848284')}}</view> -->
				</view>
				<view class="self-center">
					<u-text :text="item.editTime" color="#909399"></u-text>
				</view>
			</view>
			<view style="margin-left: 50px;font-size: 14px;">
				{{item.commentTxt}}
			</view>
		</view>
		<!-- 加载状态 -->
		<u-loadmore :status="loadingState" icon-type="circle" />
	</scroll-view>
	<!-- 分页控件 -->
	<up-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button" @change="pageChange" />

	<!-- 评论弹框 -->
	<u-popup :show="commentShow" @close="closeCommentShow" mode="center" round='8'>
		<view class="commentShow">
			<text style="font-size: 40rpx;margin-top: 20rpx;">发表评论</text>

			<!-- 	<view class="header" style="min-height: 10vh;padding:0">
				<view class="list flex flex-wrap">
					<view class="list-item" v-for="(item,index) in list" :key="index"
						@click="$u.throttle(clickComment(item), 500)">
						{{item.name}}({{item.count}})
					</view>
				</view>
			</view> -->
			    <!-- 标签评价 -->
			   <view class="tag-section">
			      <!-- <text class="section-title">快捷标签</text> -->
			      <view class="tag-group">
			        <u-tag 
			          v-for="(tag, index) in tags" 
			          :key="index"
			          :text="tag.label"
			          type="primary"
			          shape="circle"
			          size="medium"
			          @click="clickComment(tag)"
			          class="tag-item"
			        ></u-tag>
			      </view>
			    </view>

			<view class="flex-between">
				<text>评分</text>
				<u-rate count="5" v-model="rate" :allowHalf="true"></u-rate>
			</view>
			<view style="text-align:start;">
				<u--textarea v-model="comment" placeholder="请输入评价" count maxlength='100' height="100"></u--textarea>
			</view>
			<u-button shape="circle" type="primary" text="发表" @click="commentFun"></u-button>
		</view>
	</u-popup>

</template>

<script setup>
	import {
		maskPhoneNumber
	} from "@/utils/index.js"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import API from "@/api/index.js"
	import {
		reactive,
		ref,
		computed
	} from "vue"

	const commentList = reactive([])
	const list = reactive([])
	let commentShow = ref(false)
	let rate = ref(0)
	let comment = ref('')
	const sid = ref('')
	const uuid = ref('')
	const id = ref('')
	const score = ref(5)
	const isEva = ref(false)

	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loadingState = ref('loadmore')
	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})

const tags = ref([
  { label: '服务态度好', selected: false },
  { label: '准时送达', selected: false },
  { label: '风雨无阻', selected: false },
  { label: '讲礼貌', selected: false },
  { label: '仪表整洁', selected: false },
  { label: '十分满意', selected: false },
]);

	let condition = reactive([{
		"filedIndex": "sid",
		"filedValue": "0"
	}
	// , {
	// 	"filedIndex": "uid",
	// 	"filedValue": uni.getStorageSync('userInfo').id
	// },
	])

	onLoad(async (options) => {
		// 是否已经评价过
		isEva.value = options.isEva
		// 驾驶员id
		id.value = options.id
		condition[0] = {
			"filedIndex": "sid",
			"filedValue": options.id.toString()
		}
		// 获取送货员评分
		let res = await API.getRiderRate(options.id)
		score.value = res.data
		getList(page.value)
	})
	// 关闭评论弹窗
	const closeCommentShow = () => {
		commentShow.value = false
		comment.value = ''
		rate.value = 0
	}
	// 点击快捷评论
	const clickComment = (data) => {
		comment.value += data.label + ','
	}
	// 发表评论
	const commentFun = async () => {
		if (!comment.value || !rate.value) {
			uni.showToast({
				title: '请填写完整后再发表评论',
				icon: 'none'
			})
			return
		}
		let userInfo = uni.getStorageSync('userInfo')
		let res = await API.addRiderComment({
			Id: uuid.value,
			RegisterUserId: userInfo.id,
			RegisterDeptId: userInfo.deptId,
			RegisteTime: userInfo.registeTime,
			editUserId: userInfo.id,
			// EditTime: userInfo.editTime,
			EditTime: +new Date(),
			UserId: userInfo.id,
			"sendUid": id.value,
			// "commentTxt": "string",
			// "score": 0,
			// "userId": "string",
			"orderId": "string",
			"sUserInfo": null,
			// "gasId": sid.value.toString(),
			"commentTxt": comment.value,
			"score": rate.value,
			"userId": userInfo.id
		})
		if (res.code == 1) {
			uni.showToast({
				title: '评论成功！',
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: '评论失败，请重试！',
				icon: 'none'
			})
		}
		commentShow.value = false
		comment.value = ''
		rate.value = 0

		getList(page.value)
		console.log(comment.value, rate.value, res);
	}
	// 获取评论列表
	const getList = async (index) => {
		const conditionArray = condition.filter(item => item !== null);

		try {
			loadingState.value = 'loading'
			let res = await API.getRiderComment({
				"pageIndex": index,
				"pageSize": 10,
				"condition": conditionArray
			})
			res.data.list.forEach((item) => {
				if (item.userId == uni.getStorageSync('userInfo').id) {
					item.isMine = true
				} else {
					item.isMine = false
				}
			})
			if (index == 1) {
				commentList.length = 0
				Object.assign(commentList, res.data.list)
			} else {
				// commentList = [...commentList, ...res.data.list]
				commentList.push(...res.data.list)
			}
			console.log("commentList res", res.data, index, commentList);
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = commentList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}
	}
	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getList(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getList(page.value)
			}, 1000)
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.item>>>.u-rate {
		justify-content: flex-end !important;
	}
	>>>.u-tag{
		margin: 10rpx !important;
	}
</style>
<style lang="scss">
	.container {
		padding: 24rpx 32rpx 120rpx;
		background: #f5f5f5;
	}

	.rider-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		// margin-bottom: 24rpx;

		.rider-info {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.rider-detail {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
			}

			.rider-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}

			.delivery-time {
				font-size: 26rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}

		.rating {
			display: flex;
			justify-content: space-between;

			.rating-text {
				display: block;
				font-size: 28rpx;
				color: #666;
				line-height: 52rpx;
				// margin-bottom: 20rpx;
			}
		}
	}

	.tag-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 12rpx;
		margin-bottom: 22rpx;

		.tag-group {
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;

			.tag-item {
				margin: 0 20rpx 20rpx 0;
				background: #f5f5f5;

				&[type='primary'] {
					background: #ffd21e;
					color: #fff;
				}
			}
		}
	}

	.comment-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;

		::v-deep .u-textarea {
			padding: 24rpx;
			background: #f9f9f9;
			border-radius: 12rpx;
		}
	}

	.upload-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;

		.upload-btn {
			width: 160rpx;
			height: 160rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
		}
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 24rpx;
		display: block;
	}

	.submit-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 32rpx;
		background: #fff;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);

		.submit-btn {
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.commentShow {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 90vw;
		height: 50vh;
		padding: 20rpx;
		text-align: center;
	}

	.addSite {
		padding: 0 20px;

		background-color: #fff;
		// border-radius: 20rpx;
		z-index: 9;
	}

	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;

		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}

		text {
			color: #919ea9;
		}
	}

	.header {
		position: sticky;
		left: 0;
		top: 0;
		min-height: 10vh;

		padding: 20rpx;

		.list {
			&-item {
				background-color: #F6F6F6;
				margin-right: 10rpx;
				// background-color: red;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				margin-top: 15rpx;
				font-size: 24rpx !important;
			}
		}
	}

	.item {
		padding: 20rpx;
		border-top: 1px solid #F5F5F5;
		margin-top: 10rpx;
	}

	.myComment {
		background-color: #F6F6F6;
		margin-right: 10rpx;
		// background-color: red;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin-left: 82rpx;
		font-size: 24rpx !important;
	}
</style>